<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <title>ZC AI </title>
</head>
<body>
<header>
<div class="container mx-auto">
    <!-- 使用 Flex 布局容器 -->
    <div class="d-flex justify-content-between align-items-center">
        <!-- 标题保持居中 -->
        <h1 class="text-center m-0 w-100">ZC AI</h1>
        <!-- 按钮向右对齐 -->
        <div class="position-absolute end-0">
            <button class="btn btn-success me-2" data-bs-toggle="modal" data-bs-target="#registerModal">
                注册
            </button>
            <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#loginModal">
                登录
            </button>
        </div>
    </div>
    
<!-- Modal -->
    <div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="registerModalLabel">新用户注册</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="registerForm">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">电子邮箱</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">密码</label>
                            <input type="password" class="form-control" id="password" required>
                        </div>
                        <div class="mb-3">
                            <label for="confirmPassword" class="form-label">确认密码</label>
                            <input type="password" class="form-control" id="confirmPassword" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="submit" form="registerForm" class="btn btn-primary">立即注册</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录模态框（优化版） -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loginModalLabel">用户登录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="loginForm">
                        <div class="mb-3">
                            <label for="loginEmail" class="form-label">电子邮箱</label>
                            <input type="email" class="form-control" id="loginEmail" required>
                        </div>
                        <div class="mb-3">
                            <label for="loginPassword" class="form-label">密码</label>
                            <input type="password" class="form-control" id="loginPassword" required>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="rememberMe">
                            <label class="form-check-label" for="rememberMe">记住我</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="submit" form="loginForm" class="btn btn-primary">立即登录</button>
                </div>
            </div>
        </div>
    </div>
</div>
</header>
<main>
    <hr></hr>
    <div class="chat-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <button class="btn btn-primary w-100 mb-3">+ 新建聊天</button>
            <div class="history-list">
                <div class="text-secondary mb-2">今日</div>
                <div class="history-item p-2 rounded mb-1 hover-bg-gray">聊天记录 1</div>
                <div class="history-item p-2 rounded mb-1 hover-bg-gray">聊天记录 2</div>
            </div>
        </div>

        <!-- 主聊天区 -->
        <div class="chat-history">
            <!-- 消息容器 -->
            <div class="message-container">
                <!-- 机器人消息 -->
                <div class="bot-message">
                    <div class="bot-avatar avatar">
                        <svg fill="none" height="18" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
                             width="18">
                            <path d="M4 14h16M4 14v4h16v-4M4 14l3-9h10l3 9"/>
                        </svg>
                    </div>
                    <div class="bot-message-content">
                        <p>您好！我是DeepSeek智能助手，有什么可以帮您的吗？</p>
                        <div class="text-muted" style="font-size:0.875rem">2023年12月25日 14:30</div>
                    </div>
                </div>

                <!-- 用户消息 -->
                <div class="user-message">
                    <div class="user-message-content">
                        <p>请介绍一下人工智能的发展历史</p>
                        <div class="text-light" style="font-size:0.875rem">14:31</div>
                    </div>
                    <div class="user-avatar avatar">
                        <svg fill="none" height="18" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
                             width="18">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                            <circle cx="12" cy="7" r="4"/>
                        </svg>
                    </div>
                </div>
            </div>

           <div class="input-container">
                <form id="chatForm">
                    <div class="input-wrapper">
                        <input
                            type="text"
                            id="messageInput"
                            class="form-control chat-input"
                            placeholder="输入您的问题..."
                            required
                        >
                        <div id="emptyAlert" class="invalid-feedback validation-text">
                            输入内容不能为空！
                        </div>
                        <button type="submit" class="send-button btn btn-primary">
                            <svg width="20" height="20" viewBox="0 0 24 24">
                                <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
                            </svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="/js/index.js"></script>
    <script src="/js/bootstrap.min.js"></script>
</main>
<footer> <h6 class="text-center">ZC @Copy 白嫖技术有限公司</h6></footer>
</body>
</html>